import { shallowEqual, useDispatch, useSelector } from "react-redux";

import HeaderCenter from "./headerCenter";
import HeaderLeft from "./headerLeft";
import HeaderRight from "./headerRight";
import HeaderWrapper from "./style";
import classNames from "classnames";
import { changeShowSearch } from "../../store/moduels/main";


const Header = () => {
   
  const { fixed ,showSearch} = useSelector(state => {
    return {
      fixed: state.main.fixed,
      showSearch:state.main.showSearch
    }
  }, [shallowEqual])
  
  const dispatch = useDispatch();

    return (
        
      <HeaderWrapper showSearch={showSearch}>
        <div className={classNames({'fixed':fixed})} >
          <div className="top">
            <div className="search-bar">
                <HeaderLeft></HeaderLeft>
               <HeaderCenter showSearch ={showSearch} changeShowSearch={changeShowSearch}></HeaderCenter>
               <HeaderRight></HeaderRight>
            </div>
            <div className="search-area">
            </div>
          </div>
          <div className={classNames({'cover':showSearch})} onClick={()=>dispatch(changeShowSearch(false))}>
          </div>
        </div>      
          
      </HeaderWrapper> 
         
    )
}

export default Header;